<template>
  <div>
    <el-row style="margin-bottom: 10px">
      <el-col :span="12">
        <el-input
          v-model="searchQuery"
          placeholder="搜索用户"
          suffix-icon="el-icon-search"
          @input="handleSearch"
        />
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-button type="primary" @click="openAddUserDialog"
          >添加用户</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="filteredUsers" style="width: 100%" border>
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="account" label="账户" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            @click="openEditUserDialog(scope.row)"
            type="text"
            size="small"
            >编辑</el-button
          >
          <el-button
            @click="deleteUser(scope.row.id)"
            type="text"
            size="small"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalUsers"
      layout="total, prev, pager, next, jumper"
      style="margin-top: 20px"
    />

    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" v-model="isAddUserDialogVisible"> </el-dialog>
    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑用户" v-model="isEditUserDialogVisible"></el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const users = ref([
  {
    id: 1,
    username: "user1",
    email: "user1@example.com",
    role: "admin",
    account: "7845221",
  },
  {
    id: 2,
    username: "user2",
    email: "user2@example.com",
    role: "user",
    account: "7845221",
  },
  // 添加更多用户
]);

const searchQuery = ref("");
const currentPage = ref(1);
const pageSize = ref(5);
const totalUsers = computed(() => filteredUsers.value.length);
const filteredUsers = computed(() => {
  return users.value.filter((user) =>
    user.username.includes(searchQuery.value)
  );
});

const deleteUser = (id) => {
  users.value = users.value.filter((user) => user.id !== id);
};

// 分页
const handlePageChange = (page) => {
  currentPage.value = page;
};

const handleSearch = () => {
  currentPage.value = 1;
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
